<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>app下载</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<%@include file="/webpage/include/treeview.jsp" %>
	<%@include file="download.js" %>
	<style>
		.privacy-content {
			margin: 0 auto;
			padding: 10px 50px;
		}

		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		html,
		body,
		.box {
			width: 100%;
			height: 100%;
		}

		.bj {
			width: 100%;
			height: 55%;
			background: linear-gradient(to bottom right, #9bc4ff, #69a0ff);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bj .img_main {
			width: 9.2rem;
			height: 6.8rem;
		}

		.bj .img_top {
			position: absolute;
			top: 0.10667rem;
			left: 0.10667rem;
			width: 98%;
			height: 0.36rem;
			display: flex;
			justify-content: center;
		}

		.logo {
			margin-top: -1.06667rem;
			display: flex;
			justify-content: center;
		}

		.logo img {
			width: 2.8rem;
			height: 2.8rem;
			border-radius: 0.33333rem;
		}

		.logo > .img_left,
		.logo .img_right {
			flex: 1;
			margin-top: 0.13333rem;
			height: 1.2rem;
		}

		h1 {
			width: 100%;
			display: flex;
			margin-top: 0.53333rem;
			justify-content: center;
			font-size: 0.53333rem;
		}

		#btn {
			margin-top: 1.6rem;
			width: 100%;
			display: flex;
			justify-content: space-around;
			font-size: 0.53333rem;
		}

		#btn a {
			flex-basis: 40%;
			background-color: #2c639c;
			padding: 0.34667rem 0.49333rem;
			text-decoration: none;
			color: #fff;
			font-size: 0.37333rem;
			border-radius: 0.13333rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#btn img {
			margin: 0 0.2rem;
			width: 0.48rem;
			height: 0.56rem;
		}

		#btn .i-btn {
			background-color: #387bfe;
			margin-right: 0.04rem;
		}


	</style>
</head>
<body>
	<div class="wrapper wrapper-content">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">app下载</h3>
			</div>
			<div class="panel-body">
				<!-- 上背景图 -->
				<div class="bj">
					<img src="../../../image/download/top_03.jpg" alt="" class="img_top">
					<img src="../../../image/download/bj_07.jpg" alt="" class="img_main">
				</div>
				<!-- logo -->
				<div class="logo">
					<img src="../../../image/download/wave_02.jpg" alt="" class="img_left">
					<img src="../../../image/download/logo_03.jpg" alt="">
					<img src="../../../image/download/wave_04.jpg" alt="" class="img_right">
				</div>
				<!-- 标题 -->
				<h1>幺久app下载</h1>
				<!-- 下载 -->
				<div id="btn">
					<a href="https://apps.apple.com/cn/app/%E5%B9%BA%E4%B9%85/id1573858961" class="i-btn">
						<img src="../../../image/download/ios_07.jpg" alt="">苹果版下载
					</a>
					<a href="https://www.pgyer.com/06IL" class="a-btn">
						<img src="../../../image/download/Android_10.jpg" alt=""> 安卓版下载</a>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	var isAndroid = ua.indexOf('android') != -1;
	var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	var d = new Date();
	var t0 = d.getTime();
	$(function() {
		//判断执行安卓按钮还是苹果按钮
		if (isAndroid) {
			$(".a-btn").show();
		} else {
			$(".i-btn").show();
		}
	});
	//跳转下载
	$(".a-btn").click(function() {
		//安卓
		openApp("安卓下载链接");
	});
	$(".i-btn").click(function() {
		//苹果
		openApp("https://apps.apple.com/cn/app/%E5%B9%BA%E4%B9%85/id1573858961");
	});

	function openApp(src) {
		// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
		// 否则打开a标签的href链接
		var delay = setInterval(function() {
			var d = new Date();
			var t1 = d.getTime();
			if (t1 - t0 < 3000 && t1 - t0 > 2000) {
				alert('请下载APP');
				window.location.href = src;
			}
			if (t1 - t0 >= 3000) {
				clearInterval(delay);
			}
		}, 2000);
	}
</script>
</html>